<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>table模块快速使用</title>
    <link rel="stylesheet" href="../layui/css/layui.css" media="all">
</head>
<body>
<div class="layui-tab">
    <ul class="layui-tab-title">
        <li class="layui-this" id="goodsMaster">已审核订单</li>
        <li id="waybill">运输单</li>
    </ul>
    <div class="layui-tab-content">
        <div class="layui-tab-item layui-show">
            <table class="layui-hide" id="testTable" lay-filter="testTable"></table>
        </div>
        <div class="layui-tab-item">
            <div class="layui-form toolbar">
                <div class="layui-form-item">
                    <div class="layui-inline">
                        <input id="number" class="layui-input" type="text" placeholder="运输单编号"/>
                    </div>
                    <div class="layui-inline">
                        <input id="waybillDate" class="layui-input" type="text" placeholder="运输日期"/>
                    </div>
                    <div class="layui-inline">
                        <button id="btnSearch" class="layui-btn icon-btn"><i class="layui-icon">&#xe615;</i>搜索</button>
                    </div>
                </div>
            </div>
            <table class="layui-hide" id="waybillTable" lay-filter="waybillTable"></table>
        </div>
    </div>
</div>

<script type="text/html" id="toolbarDemo">
    <div class="layui-btn-container">
        <button class="layui-btn layui-btn-sm" lay-event="getCheckData">获取选中行数据</button>
        <button class="layui-btn layui-btn-sm" lay-event="getCheckLength">获取选中数目</button>
        <button class="layui-btn layui-btn-sm" lay-event="isAll">验证是否全选</button>
    </div>
</script>
<script type="text/html" id="toolbar">
    <div class="layui-btn-container">
        <button class="layui-btn layui-btn-sm" lay-event="getCheckData">获取选中行数据</button>
        <button class="layui-btn layui-btn-sm" lay-event="getCheckLength">获取选中数目</button>
    </div>
</script>

<script type="text/html" id="barDemo">
    <a class="layui-btn layui-btn-xs layui-btn-radius" id="addWaybill" lay-event="add">生成运输单</a>
</script>

<script type="text/html" id="barTwo">
    <a class="layui-btn layui-btn-radius layui-btn-warm layui-btn-xs "  lay-event="edit">修改</a>
    <a class="layui-btn layui-btn-danger layui-btn-xs layui-btn-radius"  lay-event="del">删除</a>
</script>

<script src="../layui/layui.js" charset="utf-8"></script>

<script>
    // 要使用的layui模块
    layui.use(['layer', 'form', 'table', 'laydate', 'element'], function () {
        var layer = layui.layer; // 获得layer模块
        var form = layui.form; // 获得form模块
        var table = layui.table; // 获得table模块
        var laydate = layui.laydate; // 获得laydate模块
        var element = layui.element; // 获得element模块（和导航、tab等有关）
        var $ = layui.$; // 调用JQuery方法时
        var laytpl = layui.laytpl;
        // //监听选项卡，使表格重载
        // $('#firstTab').on('click',function () {
        //     table.reload();
        // });
        // $('#secondTab').on('click',function () {
        //     table.reload();
        // });




        //更新 lay-filter="test2" 所在容器内的全部 select 状态
        // form.render('select', 'test2');
        {
            laydate.render({
                elem: '#startCarryTime',
                type: 'datetime',
                min: minDate()
            });
            laydate.render({
                elem: '#endCarryTime',
                type: 'datetime',
                min:  minDate()
            });
            laydate.render({
                elem: '#startTime',
                type: 'datetime'
            });
            laydate.render({
                elem: '#endTime',
                type: 'datetime'
            });
            laydate.render({
                elem: '#waybillDate',
                type: 'datetime'
            });

            // 设置最小可选的日期
            function minDate(){
                var now = new Date();
                return now.getFullYear()+"-" + (now.getMonth()+1) + "-" + now.getDate();
            }
        }
        // 查询用对象
        var MgrSettle = {
            tableId: "waybillTable",    //表格id
            condition: {
                number: "",
                waybillDate: ""
            }
        };
        // 查询请求内容
        MgrSettle.search = function () {
            var queryData = {};
            queryData['number'] = $("#number").val();
            queryData['waybillDate'] = $("#waybillDate").val();
            table.reload(MgrSettle.tableId, {where: queryData});
        };
        // 点击查询按钮
        $('#btnSearch').click(function () {
            MgrSettle.search();
        });
        //自定义验证规则
        form.verify({
            title: function (value) {
                if (value.length < 5) {
                    return '标题至少得5个字符啊';
                }
            }
            , word: [
                /^[A-Za-z0-9]+$/
                , '请输入正确的编号'
            ]
            , number: [
                /^[0-9]+(.[0-9]{1,5})?$/
                , '请输入正确的数字'
            ]
            , name: [
                /^[\u4E00-\u9FA5A-Za-z]+$/
                , '请填写正确的姓名'
            ]
            , carNo: [
                /^[京津沪渝冀豫云辽黑湘皖鲁新苏浙赣鄂桂甘晋蒙陕吉闽贵粤青藏川宁琼使领A-Z]{1}[A-Z]{1}[A-Z0-9]{4}[A-Z0-9挂学警港澳]{1}$/
                , '请输入正确的车牌号'
            ]
            , content: function (value) {
                layedit.sync(editIndex);
            }
        });
        //第一个实例
        var tableIns = table.render({
            elem: '#testTable' // 给table设置id或class，方便layui调用该元素
            , height: 'full-100' // 窗口高度-100
            , url: '/supply/getGoodsbillMaster' // 数据接口
            // ,method: 'post' //如果无需自定义HTTP类型，可不加该参数
            , page: {
                layout: ['limit', 'count', 'prev', 'page', 'next', 'skip']
                ,curr: 1
                ,groups: 3
                ,limit: 10
            } // 开启分页
            , cellMinWidth: 80 // 全局定义常规单元格的最小宽度，layui 2.2.1 新增
            , skin: 'line' // 行边框风格
            ,even: true // 开启隔行背景
            // ,size: 'sm' // 小尺寸的表格
            , totalRow: true // 开启合计功能
            , toolbar: '#toolbarDemo' //开启头部工具栏，并为其绑定左侧模板
            //自定义头部工具栏右侧图标。如无需自定义，去除该参数即可
            , defaultToolbar: ['filter', 'exports', 'print', { // 列过滤、导出按钮、打印按钮
                title: '提示'
                , layEvent: 'LAYTABLE_TIPS'
                , icon: 'layui-icon-tips'
            }]
            , title: '货运表'// 表名
            // 列信息
            , cols: [[ //表头
                // {type:'radio', fixed: 'left'} // 开启单选框
                {type: 'checkbox', fixed: 'left'} // 开启复选框
                , {field: 'goodsBillCode', title: '货运单编号', fixed: 'left', sort: true, totalRowText: '合计'}
                , {field: 'sendGoodsCustomer', title: '发货客户'}
                , {field: 'receiveGoodsCustomer', title: '收货客户', totalRow: false}
                , {field: 'receiveGoodsAddr', title: '收货地址', totalRow: false}
                , {field: 'validity', title: '有效性', totalRow: false}
                , {field: 'ifAudit', title: '是否审核'}
                , {field: 'carriage', title: '运费', totalRow: true}
                , {field: 'insurance', title: '保险费', totalRow: true}
                , {field: 'acceptStation', title: '接货点', totalRow: true}
                , {field: 'sendGoodsCustomerMobile', title: '发货客户手机', totalRow: true}
                , {field: 'receiveGoodsCustomerMobile', title: '收货客户手机', totalRow: true}
                , {field: 'remark', title: '备注', totalRow: true}
                , {fixed: 'right', title: '操作', toolbar: '#barDemo', width: 150}
            ]]
        });
        var tableIns = table.render({
            elem: '#waybillTable' // 给table设置id或class，方便layui调用该元素
            , height: 'full-150' // 窗口高度-100
            , url: '/supply/getWaybill' // 数据接口
            // ,method: 'post' //如果无需自定义HTTP类型，可不加该参数
            , page: true
            , limit: 10
            , cellMinWidth: 80 // 全局定义常规单元格的最小宽度，layui 2.2.1 新增
            , skin: 'line' // 行边框风格
            ,even: true // 开启隔行背景
            // ,size: 'sm' // 小尺寸的表格
            , totalRow: true // 开启合计功能
            , toolbar: '#toolbar' //开启头部工具栏，并为其绑定左侧模板
            //自定义头部工具栏右侧图标。如无需自定义，去除该参数即可
            , defaultToolbar: ['filter', 'exports', 'print', { // 列过滤、导出按钮、打印按钮
                title: '提示'
                , layEvent: 'LAYTABLE_TIPS'
                , icon: 'layui-icon-tips'
            }]
            , title: '运输表'// 表名
            // 列信息
            , cols: [[ //表头
                // {type:'radio', fixed: 'left'} // 开启单选框
                {type: 'checkbox', fixed: 'left'} // 开启复选框
                , {field: 'contractCode', title: '运输单编号', fixed: 'left', sort: true, totalRowText: '合计'}
                , {field: 'driver', title: '司机名称',templet:'<div>{{d.driver.driverName}}</div>'}
                , {field: 'startPlace', title: '发货点'}
                , {field: 'endPlace', title: '收货点', totalRow: false}
                , {field: 'startCarryTime', title: '起运时间', totalRow: false}
                , {field: 'endCarryTime', title: '到达时间', totalRow: false}
                , {field: 'receiveGoodsCustomer', title: '收货客户姓名'}
                , {field: 'receiveGoodsCustomerMobile', title: '收货客户手机', totalRow: false}
                , {field: 'totalCarriage', title: '总运费', totalRow: true}
                , {field: 'insurance', title: '保险费', totalRow: true}
                , {fixed: 'right', title: '操作', toolbar: '#barTwo', width: 150}
            ]]
        });




        //!!! 注意：批量删除按钮在script里，必须使用以下格式才能不出点击重置后无效的bug
        //批量删除
        $('body').on('click', '#btnBatchDelete', function() {
            var checkStatus = table.checkStatus('testTable'),
                data = checkStatus.data,
                keys ="";
            if(data.length > 0) {
                for (var i in data) {
                    keys+=data[i].ddid+",";
                }
                keys = keys.substring(0,keys.length-1);
                // console.log(keys);
                layer.confirm('确定删除选中的数据？',{title: '提示信息'},function(index) {
                    $.post('/supply/searchDriver'+keys,function(data){
                        if (data.code==0) {
                            tableIns.reload();
                            layer.msg(data.msg);
                            layer.close(index);
                        }
                    })
                });
            }else{
                layer.msg("请先选择需要删除的数据");
            }
        });

        // // 服务器排序
        // table.on('sort(testTable)', function (obj) {
        //     //注：sort 是工具条事件名，test 是 table 原始容器的属性 lay-filter="对应的值"
        //     // console.log(obj.field); //当前排序的字段名
        //     // console.log(obj.type); //当前排序类型：desc（降序）、asc（升序）、null（空对象，默认排序）
        //     // console.log(this); //当前排序的 th 对象
        //
        //     //尽管我们的 table 自带排序功能，但并没有请求服务端。
        //     //有些时候，你可能需要根据当前排序的字段，重新向服务端发送请求，从而实现服务端排序，如：
        //     table.reload('testTable', {
        //         initSort: obj //记录初始排序，如果不设的话，将无法标记表头的排序状态。
        //         , where: { //请求参数（注意：这里面的参数可任意定义，并非下面固定的格式）
        //             sidx: obj.field //排序字段
        //             , sord: obj.type //排序方式
        //         }
        //     });
        //     layer.msg('服务端排序。order by ' + obj.field + ' ' + obj.type);
        // });

        // 监听行单击事件
        /*table.on('row(test)', function(obj){
            console.log(obj.tr) //得到当前行元素对象
            console.log(obj.data) //得到当前行数据
            //obj.del(); //删除当前行
            //obj.update(fields) //修改当前行数据
        });*/

        // 监听行双击事件
        table.on('rowDouble(testTable)', function (obj) {
            console.log(obj.tr) //得到当前行元素对象
            console.log(obj.data) //得到当前行数据
        });

        table.on('checkbox(testTable)', function (obj) {

            // 复选框监听
            console.log(obj.checked); //当前是否选中状态
            console.log(obj.data); //选中行的相关数据
            console.log(obj.type); //如果触发的是全选，则为：all，如果触发的是单选，则为：one
        });

        //头工具栏事件
        table.on('toolbar(testTable)', function (obj) {
            var checkStatus = table.checkStatus(obj.config.id);
            switch (obj.event) {
                case 'getCheckData':
                    var data = checkStatus.data;
                    layer.alert(JSON.stringify(data));
                    break;
                case 'getCheckLength':
                    var data = checkStatus.data;
                    layer.msg('选中了：' + data.length + ' 个');
                    break;
                case 'isAll':
                    layer.msg(checkStatus.isAll ? '全选' : '未全选');
                    break;

                //自定义头工具栏右侧图标 - 提示
                case 'LAYTABLE_TIPS':
                    layer.alert('这是工具栏右侧自定义的一个图标按钮');
                    break;
            }
            ;
        });

        table.on('tool(testTable)',function (obj) {
            var data = obj.data;
            var gmid = data['gmid'];
            // alert(data['gmid']);
            if (obj.event === 'add'){
                $("#waybillForm")[0].reset();
                layer.open({
                    //layer提供了5种层类型。可传入的值有：0（信息框，默认）1（页面层）2（iframe层）3（加载层）4（tips层）
                    type: 1,
                    title: "添加运单",
                    area: ['800px','600px'],
                    btn:['取消'],
                    content: $("#waybillDiv")  //引用的弹出层的页面层的方式加载修改表单
                });
                addWaybill(gmid);
            }
        })

        function addWaybill(gmid){
            form.on('submit(ok)',function (data) {
                $.ajax({
                    url: '/supply/insertinfo',
                    type: 'POST',
                    data: {
                        gmid: gmid
                        ,startPlace: data.field.startPlace
                        ,endPlace: data.field.endPlace
                        ,startCarryTime: data.field.startCarryTime
                        ,endCarryTime:  data.field.endCarryTime
                        ,receiveGoodsCustomerMobile: data.field.receiveGoodsCustomerMobile
                        ,receiveGoodsCustomer: data.field.receiveGoodsCustomer
                    },
                    success:function (result) {
                        var code = result.code;
                        if (code == 0){
                            layer.closeAll("Loading");
                            layer.load(2);
                            layer.msg(result.msg,{icon: 6});
                            //修改成功不进行跳转
                            layer.closeAll();//关闭所有的弹出层
                            window.location.reload();
                        }else {
                            layer.msg(result.msg,{inco:5});
                        }
                    }
                });
                return false;
            })
        }

        //监听工具条
        table.on('tool(waybillTable)', function (obj) {
            var data = obj.data;
            var wid = data['wid'];
            if (obj.event === 'del') {
                layer.confirm('真的删除行么', function (index) {
                   $.ajax({
                       url: "/supply/deleteWaybill",
                       type: "POST",
                       data : {wid: wid},
                       success: function (result) {
                           if(result.code == 0){
                               obj.del();
                               //关闭弹框
                               layer.close(index);
                               layer.msg(result.msg,{icon: 6})
                               window.location.reload();
                           }else {
                               layer.msg(result.msg,{icon: 5})
                           }
                       }
                   })
                });
            }
            else if (obj.event === 'edit') {
                // var predata = obj.data;    //获得当前行数据
                // console.log(obj['driver']);
                var data = obj.data;
                var wid = data['wid'];
                $('#startPlace').val(data['startPlace']);
                $('#endPlace').val(data['endPlace']);
                $('#startCarryTime').val(data['startCarryTime']);
                $('#endCarryTime').val(data['endCarryTime']);
                $('#receiveGoodsCustomerMobile').val(data['receiveGoodsCustomerMobile']);
                $('#receiveGoodsCustomer').val(data['receiveGoodsCustomer']);
                $('#totalCarriage').val(data['totalCarriage']);
                $('#startPlace').val(data['startPlace']);
                $('#insurance').val(data['insurance']);
                layer.open({
                    //layer提供了5种层类型。可传入的值有：0（信息框，默认）1（页面层）2（iframe层）3（加载层）4（tips层）
                    type: 1,
                    title: "添加运单",
                    area: ['800px','600px'],
                    btn:['取消'],
                    content: $("#updateWaybillDiv")  //引用的弹出层的页面层的方式加载修改表单
                });
                //动态向表传递赋值
                setFormValue(data);
            }
        });
        //监听弹出框表单提交，message修啊界面的表单数据，sumbit（是修改按钮的而绑定）
        function setFormValue(olddata) {
            form.on('submit(yes)',function (data) {
                // console.log(data.field);
                $.ajax({
                    url: '/supply/updateWaybill',
                    type: 'POST',
                    data: {
                        'wid': olddata['wid']
                        ,'startPlace': data.field.startPlace
                        ,'endPlace': data.field.endPlace
                        ,'startCarryTime': data.field.startCarryTime
                        ,'endCarryTime':  data.field.endCarryTime
                        ,'receiveGoodsCustomerMobile': data.field.receiveGoodsCustomerMobile
                        ,'receiveGoodsCustomer': data.field.receiveGoodsCustomer
                        ,'totalCarriage': data.field.totalCarriage
                        ,'insurance': data.field.insurance
                        ,'contractCode': olddata['contractCode']
                        ,'driverPkid': olddata['driverPkid']
                        ,'flag': olddata['flag']
                        ,'goodsBillpkid': olddata['goodsBillpkid']
                    },
                    success:function (result) {
                        console.log(result);
                        var code = result.code;
                        if (code == 0){
                            layer.closeAll("Loading");
                            layer.load(2);
                            layer.msg(result.msg,{icon: 6});
                            layer.closeAll();//关闭所有的弹出层
                            window.location.reload();
                        }else {
                            layer.msg(result.msg,{inco:5});
                        }
                    }
                });
                return false;
            })
        }
    });

</script>
<!--这是弹出层的表单信息
表单的id用于表单的选择，style是在本页隐藏，只有点击编辑才会弹出-->
<div id="waybillDiv" style="display: none;">
    <fieldset class="layui-elem-field layui-field-title" lay-filter="driver" style="margin-top: 50px;">
        <legend>运输单信息填写</legend>
    </fieldset>
    <form class="layui-form layui-form-pane" id="waybillForm" action="" style="margin-left: 50px">
        <div class="layui-form-item">
            <label class="layui-form-label">发货点</label>
            <div class="layui-input-inline">
                <input type="text" name="startPlace" lay-verify="name" placeholder="请输入" autocomplete="off" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">交货点</label>
            <div class="layui-input-inline">
                <input type="text" name="endPlace" lay-verify="name" placeholder="请输入" autocomplete="off" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <div class="layui-inline">
                <label class="layui-form-label">起运时间</label>
                <div class="layui-input-block">
                    <input type="text" id="startTime" name="startCarryTime"  autocomplete="off" class="layui-input">
                </div>
            </div>
            <div class="layui-inline">
                <label class="layui-form-label">到达时间</label>
                <div class="layui-input-block">
                    <input type="text" id="endTime" name="endCarryTime"  autocomplete="off" class="layui-input">
                </div>
            </div>
            <div class="layui-inline">
                <label class="layui-form-label">客户手机</label>
                <div class="layui-input-inline">
                    <input type="tel"  name="receiveGoodsCustomerMobile" lay-verify="required|phone" autocomplete="off" class="layui-input">
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">客户姓名</label>
                <div class="layui-input-inline">
                    <input type="text" name="receiveGoodsCustomer" lay-verify="name" placeholder="请输入" autocomplete="off" class="layui-input">
                </div>
            </div>
        </div>
        <div class="layui-form-item">
            <button class="layui-btn" lay-submit="" lay-filter="ok" >确认提交</button>
            <button type="reset" class="layui-btn layui-btn-primary">重置</button>
        </div>
    </form>
</div>
<div id="updateWaybillDiv" style="display: none">
    <fieldset class="layui-elem-field layui-field-title" lay-filter="driver" style="margin-top: 50px;">
        <legend>运输单信息修改</legend>
    </fieldset>
    <form class="layui-form layui-form-pane" id="updateWaybillForm" action="" style="margin-left: 50px">
        <div class="layui-form-item">
            <label class="layui-form-label">发货点</label>
            <div class="layui-input-inline">
                <input type="text" id="startPlace" name="startPlace" lay-verify="name" placeholder="请输入" autocomplete="off" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">交货点</label>
            <div class="layui-input-inline">
                <input type="text" id="endPlace" name="endPlace" lay-verify="name" placeholder="请输入" autocomplete="off" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <div class="layui-inline">
                <label class="layui-form-label">起运时间</label>
                <div class="layui-input-block">
                    <input type="text" id="startCarryTime" name="startCarryTime"  autocomplete="off" class="layui-input">
                </div>
            </div>
            <div class="layui-inline">
                <label class="layui-form-label">到达时间</label>
                <div class="layui-input-block">
                    <input type="text" id="endCarryTime" name="endCarryTime"  autocomplete="off" class="layui-input">
                </div>
            </div>
            <div class="layui-inline">
                <label class="layui-form-label">客户手机</label>
                <div class="layui-input-inline">
                    <input type="tel" id="receiveGoodsCustomerMobile" name="receiveGoodsCustomerMobile" lay-verify="required|phone" autocomplete="off" class="layui-input">
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">客户姓名</label>
                <div class="layui-input-inline">
                    <input type="text" id="receiveGoodsCustomer" name="receiveGoodsCustomer" lay-verify="name" placeholder="请输入" autocomplete="off" class="layui-input">
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">总运费</label>
                <div class="layui-input-inline">
                    <input type="text" id="totalCarriage" name="totalCarriage" lay-verify="number" placeholder="请输入" autocomplete="off" class="layui-input">
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">保险费</label>
                <div class="layui-input-inline">
                    <input type="text" id="insurance" name="insurance" lay-verify="number" placeholder="请输入" autocomplete="off" class="layui-input">
                </div>
            </div>
        </div>
        <div class="layui-form-item">
            <button class="layui-btn" lay-submit="" lay-filter="yes" >确认提交</button>
            <button type="reset" class="layui-btn layui-btn-primary">重置</button>
        </div>
    </form>
</div>
</body>
</html>